<script >
import { ref } from 'vue';

export default {
  setup() {
    const activeIndex = ref('1');
    return {
      activeIndex,
    };
  },
};

</script>

<template>
<el-header class="custom-header">
    <div class="header-left">
      <el-image
        style="width: 60px; height: 60px"
        src="https://your-logo-url.com/logo.png"
        alt="Logo"
      ></el-image>
      <span class="header-title">医疗管理</span>
    </div>
    <el-menu :default-active="activeIndex" class="header-menu" mode="horizontal">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">关于</el-menu-item>
      <el-menu-item index="3">服务</el-menu-item>
      <el-menu-item index="4">联系</el-menu-item>
    </el-menu>
    <div class="header-right">
      <el-dropdown>
        <span class="el-dropdown-link">
          User <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>Profile</el-dropdown-item>
          <el-dropdown-item>Settings</el-dropdown-item>
          <el-dropdown-item divided>Logout</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header></template>

<style scoped>
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #ebeef5;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
}

.header-menu {
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
</style>
